<template>
  <div class="detail-container">
    <!-- 详情标题 -->
    <DetailTitle :qy-info="props.qyInfo" />
    <!-- 详情标题 -->

    <!-- 信息标题 附件信息-->
    <div class="attachment-info">
      <Title :title-info="titleName" />
      <div v-for="(items, index) in uploadTitle" :key="index" class="main">
        <div class="border-box">
          <div class="border-left"></div>
          <div class="border-content">{{ items.zdmc }}</div>
          <div class="border-right"></div>
        </div>
        <div class="item">
          <template v-for="(item, index) in items.fjxxInfoListsf" :key="index">
            <div style="padding: 8px; box-sizing: border-box" class="uploadbox">
              <div style="display: flex" class="fileListbox">
                <div style="width: 80%; color: #fff">
                  {{ item.fjmc }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 信息标题 -->
  </div>
</template>

<script setup lang="ts">
import { useChemicalStore } from '@/store'
import { emitter } from '@/composables'
import DetailTitle from '@/components/DetailTitle/index.vue'
import Title from '@/components/Title/index.vue'
import { queryZdZdmcInfo, queryfjList } from '@/service/api'
const titleName = '附件资料'
const chemicalStore = useChemicalStore()
// 声明props
const props = defineProps({
  qyInfo: {
    type: Object,
    default: () => {},
  },
})
const uploadTitle: any = ref([])
//附件类型
function queryxk() {
  uploadTitle.value = [
    {
      id: 14,
      zdxmc: 'fjlx',
      zdxid: '3',
      zddm: '1',
      zdmc: '平面图',
      sm: null,
      bz: '1,2',
      sfyx: null,
      cjsj: '2022-09-28 15:43:58',
      gxsj: '2022-09-28 15:43:58',
    },
    {
      id: 15,
      zdxmc: 'fjlx',
      zdxid: '3',
      zddm: '2',
      zdmc: '工艺图',
      sm: null,
      bz: '2',
      sfyx: null,
      cjsj: '2022-09-28 15:43:58',
      gxsj: '2022-09-28 15:43:58',
    },
    {
      id: 16,
      zdxmc: 'fjlx',
      zdxid: '3',
      zddm: '3',
      zdmc: '四色风险图',
      sm: null,
      bz: null,
      sfyx: null,
      cjsj: '2022-09-28 15:43:58',
      gxsj: '2022-09-28 15:43:58',
    },
    {
      id: 17,
      zdxmc: 'fjlx',
      zdxid: '3',
      zddm: '4',
      zdmc: '消防系统图',
      sm: null,
      bz: null,
      sfyx: null,
      cjsj: '2022-09-28 15:43:58',
      gxsj: '2022-09-28 15:43:58',
    },
    {
      id: 18,
      zdxmc: 'fjlx',
      zdxid: '3',
      zddm: '5',
      zdmc: '企业文档',
      sm: null,
      bz: null,
      sfyx: null,
      cjsj: '2022-09-28 15:43:58',
      gxsj: '2022-09-28 15:43:58',
    },
    {
      id: 19,
      zdxmc: 'fjlx',
      zdxid: '3',
      zddm: '6',
      zdmc: '历史事故案例',
      sm: null,
      bz: null,
      sfyx: null,
      cjsj: '2022-09-28 15:43:58',
      gxsj: '2022-09-28 15:43:58',
    },
    {
      id: 20,
      zdxmc: 'fjlx',
      zdxid: '3',
      zddm: '99',
      zdmc: '其他',
      sm: '其他消防车',
      bz: '1,2',
      sfyx: null,
      cjsj: '2022-09-28 15:43:58',
      gxsj: '2022-09-28 15:43:58',
    },
  ]

  uploadTitle.value.forEach((item: any) => {
    item.fjxxInfoListsf = []
  })

  // queryZdZdmcInfo({ key: 'fjlx' }).then((res: any) => {
  //   res.map((item: any, index: any) => {
  //     item.fjxxInfoListsf = []
  //     if (item.zddm === '7') {
  //       res.splice(index, 1)
  //     }
  //   })
  //   uploadTitle.value = res
  // })
}
emitter.on('uploadfile', () => {
  queryfjxxList()
})
//编辑查询附件
const queryfjxxList = async () => {
  const param = {
    ssid: chemicalStore.qyInfo.id,
    key: chemicalStore.qyInfo.id,
  }
  const res = await queryfjList(param)
  nextTick(() => {
    setTimeout(() => {
      uploadTitle.value.map((i) => {
        i.fjxxInfoListsf = []
        res.map((item: any) => {
          if (item.fjlx == i.zddm) {
            i.fjxxInfoListsf.push(item)
          }
        })
      })
    }, 100)
  })
}
queryfjxxList()
onMounted(() => {
  queryxk()
})
onUnmounted(() => {
  emitter.off('uploadfile')
})
</script>

<style lang="less" scoped>
.detail-container {
  width: 460px;
  padding: 15px;
  overflow: auto;
  border: 1px solid #0d609c;
  background: rgba(1, 7, 17, 0.7);
  box-sizing: border-box;
  .attachment-info {
    .main {
      margin-bottom: 10px;
      .border-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        top: 10px;
        .border-left,
        .border-right {
          width: 38%;
          height: 3px;
          background-color: #666;
        }
        .border-content {
          width: 100px;
          text-align: center;
          color: rgba(255, 255, 255, 0.8);
        }
      }
      .item {
        height: 114px;
        border: 1px solid #797979;
        border-top: 1px solid transparent;
        overflow: auto;
      }
    }
  }
}
</style>
